<template>
    <div id="users" class="finance" >
	    	<div class="finance_gif_div" v-if="current_user.user_type=='super'">
			<img src="../../assets/finance/loading.gif"  class="finance_gif"/>
			<div>正在去往上海蓉申建筑劳务有限公司</div>
		</div>
		<div v-if="current_user.user_type!='super'">
	        <finance-header></finance-header>
	        <div class="content_box">
	            <finance-price></finance-price>
	            <div class="finance_table_box">
	                <finance-table v-if="financeVisi.visibled"></finance-table> 
	                <finance-invoice v-else></finance-invoice>
	                
	            </div>
	        </div>
	   </div>
    </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
import Header from './common/Header.vue'
import Table from './common/Table.vue'
import Invoice from './common/Invoice.vue'
import Price from './common/Price.vue'
    export default {
        computed:{
            ...mapGetters(['financeVisi','current_user'])
        },
        components: {
            'finance-header': Header ,
            'finance-table': Table,
            'finance-price': Price,
            'finance-invoice': Invoice
        }
    }
</script>
<style lang='scss' scoped>
    .content_box{
        padding: 40px;
        display: flex;
    }
    .finance_table_box{
        > .finance_table:nth-child(2){
            padding: 0px 40px;
        }
        margin-left:19px;
        width: 100%;
        background: #fff;
        .finance_table{
            display: flex;
            padding:40px 40px;
        }
        .page{
            text-align: right;
            padding:0px 40px 40px 0px;
        }
    }
    .finance_gif_div{
    		margin: 5% 5%;
    		background-color: white;
    		height: 700px;
    		text-align: center;
    		font-size:16px;
		color:#8492a6;
		letter-spacing:10px;
		text-align:center;
    }
    .finance_gif{
    		margin: 10% auto;
    }
</style>
